<template>
  <div>
    <div v-show="show" id="dialog"></div>
    <div class="gb" v-show="show" @click="guan">x</div>
  </div>
</template>
<script setup>
import emitter from '../utils/eventBus'
import { bookData } from '../api/index'
import { ref, reactive, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

// 控制对话框的显示与隐藏
const show = ref(false)
emitter.on('ech', (flag) => {
  show.value = flag
})

// 关闭按钮
const guan = () => {
  show.value = false
}

// 隐藏数据可视化
emitter.on('change', (flag) => {
  show.value = flag
})

// 获取全部图书数据
const data = reactive({
  wenxue: [],
  yishu: [],
  lishi: [],
  jiaocai: [],
  keji: [],
  ertong: [],
})
const get = async () => {
  const res = await bookData()
  data.wenxue = res.data.filter((item) => item.category === '文学')
  data.yishu = res.data.filter((item) => item.category === '艺术')
  data.lishi = res.data.filter((item) => item.category === '历史')
  data.jiaocai = res.data.filter((item) => item.category === '教材')
  data.keji = res.data.filter((item) => item.category === '科技')
  data.ertong = res.data.filter((item) => item.category === '儿童')
}
get()

// 获取data中的数据
watch(data, (newvalue) => {
  var y = []
  y.push(
    newvalue.wenxue.length,
    newvalue.yishu.length,
    newvalue.lishi.length,
    newvalue.jiaocai.length,
    newvalue.keji.length,
    newvalue.ertong.length
  )
  window.localStorage.setItem('ydata', JSON.stringify(y))
})
var ydata = JSON.parse(window.localStorage.getItem('ydata'))
// 数据可视化
onMounted(() => {
  var dialog = document.querySelector('#dialog')
  // 初始化echarts实例对象
  var myChart = echarts.init(dialog)
  const dataAxis = ['文学', '艺术', '历史', '教材', '科技', '儿童']
  // 指定配置项和数据
  const option = {
    title: {
      text: '图书数据可视化',
      subtext: '滚动鼠标滑轮可进行缩放',
    },
    tooltip: { trigger: 'axis' },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: true,
        color: '#fff',
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      z: 10,
    },
    yAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#999',
      },
    },
    dataZoom: [
      {
        type: 'inside',
      },
    ],
    series: [
      {
        type: 'bar',
        name: '数量',
        showBackground: true,
        itemStyle: {
          // 原来的颜色
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ffb980' },
            { offset: 0.5, color: '#d87a80' },
            { offset: 1, color: '#8d98b3' },
          ]),
        },
        emphasis: {
          itemStyle: {
            // 改变后的颜色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2ec7c9' },
              { offset: 0.7, color: '#b6a2de' },
              { offset: 1, color: '#5ab1ef' },
            ]),
          },
        },
        data: ydata,
      },
    ],
  }

  const zoomSize = 6
  myChart.on('click', function (params) {
    myChart.dispatchAction({
      type: 'dataZoom',
      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue:
        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
    })
  })

  option && myChart.setOption(option)
})
</script>
<style lang="less" scoped>
#dialog {
  position: absolute;
  z-index: 20;
  top: 100px;
  left: 38%;
  width: 600px;
  height: 600px;
  background-color: #ccc;
}
.gb {
  cursor: pointer;
  z-index: 30;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 296px;
  text-align: center;
  top: 100px;
  color: #fff;
  font-size: 30px;
}
</style>
